<!--新增榜单-->
<template>
  <div>
    <el-dialog
      :title="form.id ? '编辑走马灯' : '新增走马灯'"
      :visible="lanternShow"
      width="800px"
      @close="handleClose"
      center
    >
      <el-form :model="form" ref="form" :rules="rules" label-width="120px">
        <el-form-item label="走马灯分类" prop="cate">
          <el-select
            style="width: 600px"
            v-model="form.cate"
            placeholder="请选择分类"
          >
            <el-option
              v-for="item in runCateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标题" prop="title">
          <el-input
            placeholder="请输入标题"
            style="width: 600px"
            v-model="form.title"
          ></el-input>
        </el-form-item>

        <el-form-item label="走马灯icon" label-width="120px">
          <div style="display: flex">
            <single-upload
              uploadType="2"
              @uploadSucces="uploadSucces"
              v-model="form.pic"
            >
              <div class="uploadPic" v-if="!form.pic">
                <i
                  style="font-size: 40px; color: #ccc; font-weight: bold"
                  class="el-icon-plus"
                ></i>
              </div>
            </single-upload>
            <div style="margin-top: 50px; color: #999">
              上传走马灯icon (封面规格：30*40)
            </div>
          </div>
        </el-form-item>
        <el-form-item label="内容形式" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="2">无</el-radio>
            <el-radio :label="0">上传链接</el-radio>
            <el-radio :label="1">选择文章内容</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="form.type == 0">
          <el-form-item prop="url" label="链接地址">
            <el-input
              style="width: 500px"
              placeholder="请输入链接地址"
              v-model="form.url"
            ></el-input>
          </el-form-item>
        </div>
        <div v-if="form.type == 1">
          <el-form-item prop="cid" label="文章分类">
            <el-cascader
              v-model="form.cid"
              :options="articleCateList"
              :props="props"
              @change="changeCate"
              clearable
            />
          </el-form-item>
          <el-form-item
            label="文章链接"
            prop="articleId"
            v-show="form.type == 1"
          >
            <el-select
              v-model="form.articleId"
              placeholder="请选择文章链接"
              clearable
            >
              <el-option
                v-for="item in articleList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button
            style="width: 100px"
            size="small"
            type="primary"
            @click="onsubmit('form')"
            >确定</el-button>
          <el-button
            style="width: 100px"
            size="small"
            @click="handleClose('form')"
            >取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getArticleList, getArticleInfo } from "@/api/article";
import SingleUpload from "@/components/Upload/uploadOne";
import { addRound, editRound } from "@/api/rank";
export default {
  components: { SingleUpload },
  props: {
    runCateList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    articleCateList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      props: {
        emitPath: false,
      },
      lanternShow: false,
      form: {
        cate: "",
        title: "",
        pic: "",
        type: 0,
        cid: "",
        articleId: "",
      },
      rules: {
        cid: [{ required: true, message: "请选择文章分类", trigger: "blur" }],
        articleId: [
          { required: true, message: "请输入文章链接", trigger: "blur" },
        ],
        cate: [{ required: true, message: "请选择分类", trigger: "blur" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        pic: [{ required: true, message: "请上传走马灯icon", trigger: "blur" }],
        type: [{ required: true, message: "请选择内容形式", trigger: "blur" }],
        url: [{ required: true, message: "请输入链接地址", trigger: "blur" }],
      },
      articleList: [],
    };
  },
  methods: {
    onsubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.type == 0) {
            this.form.articleId = "";
          } else {
            this.form.url = "";
            delete this.form.cid;
          }
          if (this.form.id) {
            editRound(this.form).then((res) => {
              if (res.code == 200) {
                this.$message.success("修改成功");
                this.handleClose();
                this.$emit("getList");
              }
            });
          } else {
            addRound(this.form).then((res) => {
              if (res.code == 200) {
                this.$message.success("添加成功");
                this.handleClose();
                this.$emit("getList");
              }
            });
          }
        }
      });
    },
    resetForm() {
      this.form = {
        cate: "",
        title: "",
        pic: "",
        type: 0,
        cid: "",
        articleId: "",
      };
    },
    handleClose() {
      this.resetForm();
      this.lanternShow = false;
    },
    async openDialog(v) {
      if (v) {
        if (v.type == 1 && v.articleId) {
          await getArticleInfo(v.articleId).then((res) => {
            v.cid = res.data.cateId;
            this.getArticleList(v.cid);
          });
        }
        this.form = Object.assign({}, v);
      }

      this.lanternShow = true;
    },
    cancle() {
      this.lanternShow = false;
    },
    changeCate(val) {
      this.form.cid = val
      this.getArticleList(this.form.cid);
      if (val) {
        // if (this.form.cid.length > 0) {
        //   this.form.cid = this.form.cid[this.form.cid.length - 1];
        //   this.getArticleList(this.form.cid);
        // }
      } else {
        this.form.articleId = ''
      }

    },
    getArticleList(id) {
      getArticleList({
        cateId: id,
        pageNum: 1,
        pageSize: 1000,
        type: 1,
      }).then((res) => {
        this.articleList = res.data.list;
      });
    },
    uploadSucces() {
      this.$refs.form.validateField("pic");
    },
    lanterConfirm() {},
  },
};
</script>

<style lang="scss" scoped>
.uploadPic {
  width: 90px;
  height: 90px;

  background: #eeeeee;
  border-radius: 8px;
  position: relative;
  > i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
/deep/ .el-select,
/deep/ .el-cascader {
  width: 100%;
}
</style>
